<template>
	<view class="pop-container" v-if="showPop">
		<view class="mask" @tap="$emit('maskClick')"></view>
		<view class="content">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default{
		name: 'yxyl-pop',
		props:{
			show: {
				type: Boolean,
				default: false
			}
		},
		data(){
			return{
				showPop: false
			}
		},
		watch:{
			show(e){
				this.showPop = e;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes fade-in{
		from{opacity: 0;}
		to{opacity: 1;}
	}
	.pop-container{
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		animation: fade-in linear .3s;
		z-index: 999;
		.mask{
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: #000;
			opacity: .5;
		}
		.content{
			min-width: 300rpx;
			min-height: 200rpx;
			background-color: #fff;
			border-radius: 10rpx;
			z-index: 1000;
			position: relative;
			top: -200rpx;
		}
	}
</style>
